<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>
<body class="base-layout-page">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row base-card-screen">
            <div class="pull-left layui-form-pane base-search-box">
                <!-- 表单 -->
                <form id="form" th:method="post" th:action="@{/sys/admin/page}">
                    <input type="hidden" id="basePageNum" name="basePageNum" th:value="${pageInfo.pageNum}">
                    <input type="hidden" id="basePageSize" name="basePageSize" th:value="${pageInfo.pageSize}">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block base-search-status">
                            <select class="base-search-select" id="active" name="active">
                                <option value="" th:selected="${pojoCondition.active==null}">所有</option>
                                <option value="1" th:selected="${pojoCondition.active==1}">开启</option>
                                <option value="2" th:selected="${pojoCondition.active==2}">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">等级</label>
                        <div class="layui-input-block base-search-status">
                            <select class="base-search-select" id="grade" name="grade">
                                <option value="" th:selected="${pojoCondition.grade==null}">所有</option>
                                <option value="1" th:selected="${pojoCondition.grade==1}">超级管理员</option>
                                <option value="2" th:selected="${pojoCondition.grade==2}">管理员</option>
                                <option value="3" th:selected="${pojoCondition.grade==3}">用户</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">模糊搜索</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="baseVague" name="baseVague"
                                   th:value="${pojoCondition.baseVague}" placeholder="请输入账号、姓名、手机号" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="createTime" name="createTime"
                                   th:value="${#dates.format(pojoCondition.createTime,'yyyy-MM-dd')}" placeholder="请选择时间" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-btn-group">
                            <button type="submit" class="layui-btn base-search-btn">
                                <i class="fa fa-search"></i> 查询
                            </button>
                            <button type="button" class="base-reload layui-btn base-search-btn">
                                <i class="fa fa-search"></i> 刷新
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="pull-right screen-btn-group">
                <button class="layui-btn base-open-modifyDialog"
                        th:attr="data-title='添加用户',data-url=@{/sys/admin/toModify/add/0},data-size='540,570'">
                    <i class="layui-icon layui-icon-add-circle"></i> 添加
                </button>
                <button class="layui-btn base-open-deleteDialog" th:attr="data-title='删除用户',data-url=@{/sys/admin/delete}">
                    <i class="layui-icon layui-icon-delete"></i> 删除
                </button>
            </div>
        </div>
        <div class="base-table-wrap">
            <table class="layui-table base-table">
                <thead>
                <tr>
                    <th class="base-table-checkbox">
                        <label class="base-checkbox">
                            <input type="checkbox" id="thead_checkbox">
                            <i class="layui-icon layui-icon-ok"></i>
                        </label>
                    </th>
                    <th>姓名</th>
                    <th>账号</th>
                    <th>手机号码</th>
                    <th>等级</th>
                    <th>邮箱</th>
                    <th>创建时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 加载数据 -->
                <tr th:each="item,status:${pageInfo.list}">
                    <td>
                        <label class="base-checkbox">
                            <input type="checkbox" name="tbody_checkbox" th:value="${item.id}">
                            <i class="layui-icon layui-icon-ok"></i>
                        </label>
                    </td>
                    <td th:text="${item.userName}"></td>
                    <td th:text="${item.account}"></td>
                    <td th:text="${item.phone}"></td>
                    <th:block th:switch="${item.grade}">
                        <td th:case="1">超级管理员</td>
                        <td th:case="2">管理员</td>
                        <td th:case="3">用户</td>
                        <td th:case="*">未知</td>
                    </th:block>
                    <td th:text="${item.email}"></td>
                    <td th:text="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <th:block th:switch="${item.active}">
                        <td th:case="1" style="color:#2ec770">开启</td>
                        <td th:case="2" style="color:#f78686">禁用</td>
                        <td th:case="*">未知</td>
                    </th:block>
                    <td>
                        <button type="button"
                                class="base-open-modifyDialog layui-btn layui-btn-primary layui-btn-sm"
                                th:attr="data-title='用户授权',data-url=@{/sys/admin/toAuthorization/{id}(id=${item.id})},data-size='680,600'">
                            <i class="layui-icon layui-icon-group"></i> 授权
                        </button>
                        <button type="button"
                                class="base-open-modifyDialog layui-btn layui-btn-primary layui-btn-sm"
                                th:attr="data-title='编辑用户',data-url=@{/sys/admin/toModify/update/{id}(id=${item.id})},data-size='540,570'">
                            <i class="layui-icon layui-icon-edit"></i> 编辑
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--分页-->
        <div id="basePage"></div>
    </div>
</div>
<script th:replace="/sys/base :: scriptFragment"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery','layer','laydate','laypage'], function () {
        var $ = layui.jquery;
        $.selectCheckBoxValueLI("thead_checkbox","tbody_checkbox"); // 复选框全选、反选

        var laydate = layui.laydate;  // TODO 日期选择文本框
        laydate.render({
            elem: '#createTime'
            ,theme: 'molv'
            ,type: 'date'
            ,min: '2019-01-01'
            ,max: '2020-12-31'
        });

        var laypage = layui.laypage; // TODO 分页
        laypage.render({
            elem: 'basePage'
            ,curr: [[${pageInfo.pageNum}]]
            ,count: [[${pageInfo.total}]]
            ,limit: [[${pageInfo.pageSize}]]
            ,layout: ['limit','count','prev','page','next','refresh','skip']
            ,jump: function(obj,first){
                if(!first){
                    $("#basePageNum").val(obj.curr);
                    $("#basePageSize").val(obj.limit);
                    $("form").get(0).submit();
                }
            }
        });
    });
</script>
</body>
</html>